<template>
  <canvas :id="'container'+index"/>
</template>

<script>
  import F2 from '@antv/f2';

  export default {
    name: 'index',
    mounted() {
      this.init();
    },
    props: {
      index: {
        type: Number,
        default: 0
      },
      data: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      init() {
        const chart = new F2.Chart({
          id: 'container' + this.index,
          pixelRatio: window.devicePixelRatio
        });
        const { data } = this;
        const map = data.reduce((obj, item) => ({
          ...obj,
          [item.name]: item.percent * 100 + '%'
        }), {});
        chart.source(data, {
          percent: {
            formatter(val) {
              return val * 100 + '%';
            }
          }
        });
        chart.legend({
          position: 'right',
          itemFormatter: function itemFormatter(val) {
            return val + '  ' + map[val];
          }
        });
        chart.tooltip(false);
        chart.coord('polar', {
          transposed: true,
          radius: 0.85
        });
        chart.axis(false);
        chart.interval()
          .position('a*percent')
          .color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
          .adjust('stack')
          .style({
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round'
          })
          .animate({
            appear: {
              duration: 1200,
              easing: 'bounceOut'
            }
          });

        chart.render();
      }
    }
  };
</script>

<style scoped>
  canvas {
    width: 100%;
    background: #fff;
  }
</style>
